//-----------------------------------------------------
//@name    atom
//@desc    原子类样式，包括网格、清除浮动、浮动、显示隐藏、颜色、边距等；直接在class中调用方便快捷。
//@author  guozd
//@date    2018-07-22
//-----------------------------------------------------	

//grid
:global(.grid){
	width: $baseWidth;
	margin: 0 auto;
	@include transition();
	&:after,&:before{
		display: table;
		content: "";
	}
	&:after{
		clear:both;
	}
}

@include max-screen-width($baseWidth+20){
	:global(.grid){
		width:$baseNarrowWidth;
	}
}

// clearfix 
:global(.cf):after {
	clear: both;
}

:global(.clear) {
	clear: both;
	display: block;
	visibility: hidden;
	overflow: hidden;
	width: 0;
	height: 0;
}

:global(.cf){
	*zoom: 1;
	&:before,&:after{
		display: table;
		content: "";
	}
	&:after{
		clear: both;
	}
}


:global(.fl) {
	float: left;
}

:global(.fr) {
	float: right;
}

:global(.fl_),:global(.fr){
	_display: inline;
}

:global(.show) {
	display: block;
}

:global(.hide) {
	display: none;
}


//color class
:global(.red){
	color: $red;
}

:global(.blue){
	color: $blue;
}

:global(.black){
	color: $black;
}

:global(.orange){
	color: $orange;
}

:global(.orangeDarker){
	color: $orangeDarker;
}

:global(.green){
	color: $green;
}

:global(.grayDarker){
	color: $grayDarker;
}

:global(.grayDark){
	color: $grayDark;
}

:global(.gray){
	color: $gray;
}

:global(.grayLight){
	color: $grayLight;
}

:global(.white){
	color: $white;
}

//font
@for $i from 1 through 10 {
	$j:2*$i;
	:global(.font#{12+$j}){
		font-size:#{12+$j}px;
	}
}

:global(.font-arial){
	font-size:$fontArial;
}
:global(.font-simsun){
	font-size:$fontSimsun;
}
:global(.font-yahei){
	font-size:$fontYaHei;
}

//margin size
$baseMarginSize:5px !default;       
$basePaddingSize:5px !default;

//margin
@for $i from 1 through 10 {
	//margin-top
	:global(.mt#{$i*5}) {
		margin-top:$baseMarginSize*$i;
	}

	//margin-right
:global(.mr#{$i*5}){
		margin-right:$baseMarginSize*$i;
	}

	//margin-bottom
:global(.mb#{$i*5}) {
		margin-bottom:$baseMarginSize*$i;
	}

	//margin-left
:global(.ml#{$i*5}) {
		margin-left:$baseMarginSize*$i;
	}
}

//padding
@for $i from 1 through 10 {
	//padding-top
	:global(.pt#{$i*5}) {
		padding-top:$basePaddingSize*$i;
	}

	//padding-right
:global(.pr#{$i*5}) {
		padding-right:$basePaddingSize*$i;
	}

	//padding-bottom
:global(.pb#{$i*5}) {
		padding-bottom:$basePaddingSize*$i;
	}

	//padding-left
:global(.pl#{$i*5}) {
		padding-left:$basePaddingSize*$i;
	}
}

//z-index
@for $i from 10 through 20{
	:global(.zIndex#{$i}) {
		z-index:$i;
	}
}

:global(.required){
	color:#f00;
	margin-right:5px;
}


